<template>
	<view style=" min-height:100vh;background-color: white;padding: 20rpx;padding-bottom: 40rpx;">
		<fui-form labelSize="26rpx" ref="form" labelWidth="180">
			<fui-form-item :padding='[0,0]' :bottomBorder="false">
				<template v-slot:vertical>
					<fui-textarea size="26" maxlength="-1" :padding="['32rpx','0rpx']" :border-bottom="false"
						:border-top="false" placeholder="请输动态说明..." v-model="formData.descr"></fui-textarea>
				</template>
			</fui-form-item>
			<fui-form-item :padding='["30rpx",0]' bottomBorder label="形式:">

				<fui-radio-group name="radio" @change="checked">
					<view class="fui-list__item flex">
						<view class="fui-align__center">
							<fui-radio color="#FFDD00" :value="0" :checked="formData.adType== 0"></fui-radio>
							<text class="fui-text">图片</text>
						</view>

						<view class="fui-align__center">
							<fui-radio color="#FFDD00" :value="1" :checked="formData.adType== 1"></fui-radio>
							<text class="fui-text">视频</text>
						</view>

					</view>
				</fui-radio-group>

			</fui-form-item>
			<fui-form-item :padding='["30rpx",0]' bottomBorder label="上传:">
				<template v-slot:vertical>
					<view class="">
						<view style="width: 100%;" v-show="formData.adType==0">
							<fui-upload immediate :url="urlImg" :fileList="formData.uploadFiles" ref="imgUpload"
								@success="success" @delete="isDelete" @error="error" @complete="complete"></fui-upload>
						</view>
						<view style="width: 100%;" v-show="formData.adType==1">
							<fui-upload-video immediate :url="urlVideo" :fileList="formData.media" ref="videoUpload"
								@success="success" @delete="isDelete" @error="error"
								@complete="complete"></fui-upload-video>

						</view>
					</view>
				</template>
			</fui-form-item>
			<fui-form-item :padding='["30rpx",0]' bottomBorder labelWidth="200rpx" label="选择链接:">
				<template v-slot:vertical style="padding: 20rpx;">
					<fui-input size="26" disabled :borderBottom="false" @click="toLink" :padding="[0]"
						placeholder="选择链接"></fui-input>
				</template>
			</fui-form-item>
		</fui-form>
		<view class="saveBtns">
			<view style="width: 90vw; display: inline-block;">
				<fui-button background="#FFDD00" width="100%" height="70rpx" color="#000" class="saveBtn"
					@click="submitOrder">提交发布</fui-button>
			</view>
		</view>
		<!-- 选择链接 -->
		<fui-bottom-popup :show="show" @close="closePopup">
			<view class="fui-custom__wrap">
				<view class="fui-icon__close" @tap="closePopup">
					<fui-icon name="close" :size="48"></fui-icon>
				</view>
				<selectLink></selectLink>
			</view>
		</fui-bottom-popup>
	</view>
</template>

<script>
	import selectLink from '@/releasePages/selectLink.vue'
	export default {
		components: {
			selectLink
		},
		data() {
			return {
				formData: {
					formOrder: 'dynamic',
					adType: 0,
					media: [],
					uploadFiles: [],
					descr: '',
				},
				show: false,
				activeBackgroundColor_input: "#007AFF",
				//上传接口地址

				urlImg: 'https://api.zhanfang.comdns.cn/uniapp/common/Upload/upload?file=uniapp&type=image',
				urlVideo: 'https://api.zhanfang.comdns.cn/uniapp/common/Upload/upload?file=uniapp&type=video',
				//上传状态，用于保存或其他操作时做判断
				status: '',
				//上传的视频地址列表
				imgUrls: [],
				videoUrls: [],
				form: null,
				imgUpload: null,
				videoUpload: null,
				gender: 0,
			};
		},
		methods: {
			toLink() {
				this.show = true
			},
			closePopup() {
				this.show = false
			},
			// 删除时触发
			isDelete(e) {
				console.log('删除', e)
				if (this.formData.adType == 0) {
					this.formData.uploadFiles.splice(e.index, 1)
				}
				if (this.formData.adType == 1) {
					this.formData.media.splice(e.index, 1)
				}
			},
			//上传成功时触发
			success(e) {
				console.log(e)
				//e.res 为服务器返回数据
				//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				this.status = e.status
				if (res.data.url) {
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的视频地址
					//e.index为视频索引值
					// 0是图片 1是视频
					if (this.formData.adType == 0) {
						this.formData.uploadFiles.push(res.data.url)
					}
					if (this.formData.adType == 1) {
						this.formData.media.push(res.data.url)
					}
					uni.showToast({
						title: '上传完成',
						icon: 'success',
						duration: 2000
					});
					console.log('this.formData:', this.formData)


				}
			},
			//上传失败时触发
			error(e) {
				this.status = e.status
				uni.showToast({
					title: '上传失败，请检查网络',
					icon: 'fail',
					duration: 2000
				});
			},
			//选择视频或上传完成时触发
			complete(e) {
				this.status = e.status
			},
			checked(e) {
				this.formData.adType = e.detail.value
			},
			submitOrder() {
				console.log('表单', this.formData);

				if (this.formData.adType == 0 && this.formData.uploadFiles.length == 0) {
					this.$common.showToast("请上传对应素材");
					return
				}
				if (this.formData.adType == 1 && this.formData.media.length == 0) {
					this.$common.showToast("请上传对应素材");
					return
				}
				if (!this.formData.descr) {
					this.$common.showToast("请输入动态说明");
					return
				}

				this.$httpost('/Form/submitOrder', this.formData).then(res => {
					this.$common.showToast("动态发布成功");
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 500)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fui-icon__close {
		z-index: 5556;
		position: absolute;
		top: 24rpx;
		left: 24rpx;
	}


	.fui-custom__wrap {
		position: relative;
		padding-top: 60rpx;
		height: 80vh;
	}

	::v-deep .fui-uploadv__del-wrap {
		width: 100% !important;
		margin: 0 0 0 0 !important;
	}

	::v-deep .fui-uploadv__item {
		width: 100% !important;
		margin: 0 0 0 0 !important;
	}

	::v-deep .fui-upload__video {
		width: 100% !important;
		margin: 0 0 0 0 !important;
	}

	.fui-align__center {
		margin-right: 20rpx;
		display: flex;
		align-items: center;
	}

	.uni-form-item {
		padding: 15px 0;
	}

	.title {
		margin-bottom: 10px;
	}

	.group-item {
		flex-direction: row;
		margin-right: 20px;
	}

	.fui-text {
		margin-left: 10rpx;
	}

	.saveBtns {
		position: fixed;
		z-index: 100;
		bottom: 20rpx;
		left: 0%;
		right: 0%;
		text-align: center;
	}

	.btn {
		flex: 1;
	}

	.btn-submit {
		margin-right: 5px;
	}

	.btn-reset {
		margin-left: 5px;
	}

	.result {
		margin-top: 30px;
	}

	.formItem {
		background-color: white;
		padding: 20rpx;
	}

	.fui-btn__box {
		margin-top: 20rpx;

	}
</style>